<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello Vue(任务1)</title>
		<!-- 本地引入 default-->
		<!-- <script src="js/vue.js"></script> -->
		<!--  CND 引入 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app"> {{ counter }} </div>
		<div class="mes"> {{message}} </div>

		<script>
			const App = {
				data() {
					return {
						counter: 0,
						message: "hello Vue!"
					}
				},
				beforeCreate(){
					console.log('beforeCreate');
				},
				created(){
					console.log('Create');
				},
				beforeMount(){
					console.log('beforeMount');
				},
			};

			Vue.createApp(App).mount('#app');
			Vue.createApp(App).mount('.mes');
		</script>
		
		<!-- default -->
		<!-- <script>
		export default {
		  data() {
		    return {
		      msg: 'Hello World!'
		    }
		  }
		}
		</script>
		
		<template>
		  <h1>{{ msg }}</h1>
		  <input v-model="msg">
		</template> -->
	</body>

	<!-- <script>
		// Vue2.0
		// new Vue({
		// 	el:'#app',
		// 	data:{
		// 		counter:'hello!'
		// 	}
		// })

		// Vue3.0
		// const { createApp } = Vue
		// createApp({
		//   data() {
		// 	return {
		// 	  counter: 'Hello Vue!'
		// 	}
		//   }
		// }).mount('#app')
		
		// 方法一
		// const app = Vue.createApp({
		// 	data(){
		// 		return {
		// 			message: "hei",
		// 		}
		// 	},
		// 	methods:{
				
		// 	}
		// });
		// const vm = app.mount(".app");
		
		// 方法二
		Vue.createApp({
			data(){
				return{
					message:"hi",
				}
			},
			methods:{
				
			}
		}).mount(".app");
	</script> -->
</html>
